<template>
	<div>
		<div class="head">
			<div @click="$router.push({path: '/My'})" class="return"></div>
		</div>
		<div class="overlay">
			<div class="overlay-content">
				<div class="invite" align="center">
					<div class="invite_logo">
						<div class="logo">
							<img src="../assets/images/logo.png" style="width: 25%;" />
						</div>
					</div>
					<div class="invite_font">
						<span style="color: #f8ce63;">{{$t('Invite.v1')}}</span>
					</div>
					<div class="invite_code">
						<div class="code_code" style="margin-top: 10px;">
							<span>{{$t('Invite.v2')}}</span>
							<span style="margin-left: 10px;" v-text="list.uuid">1234567</span>
						</div>
						<div>
							<div id="copyText" v-text="list.url" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
						</div>
						<div class="code_img">
							<img :src="list.imgUrl" width="80%">
						</div>
						<van-button @click="copyLink(list.url)" class="tag" type="warning" style="background: #ae7b21;border-color: #ae7b21;height: 36px;line-height: 34px;margin-top: 20px;width: 90%;">{{$t('Invite.v3')}}</van-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { safety } from './../utils/api';
	import Clipboard from 'clipboard';
	export default {
		name: 'Invite2',
		data() {
			return {
				list: []
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				safety.getSharing().then(res => {
					this.list = res.data;
				})
			},
			copyLink(data) {
				let clipboard = new Clipboard('.tag', {
					text: function() {
						return data;
					}
				})
				clipboard.on('success', e => {
					this.$toast(_this.$t('Invite.v4'));
					// 释放内存
					clipboard.destroy();
				})
				clipboard.on('error', e => {
					this.$toast(_this.$t('Invite.v4'));
					clipboard.destroy();
				})
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.head {
		background: transparent;
	}

	.head~.overlay {
		top: 0;
	}

	.overlay {
		background: url(../assets/images/invite-1.png) no-repeat;
		background-size: 100% 100%;
	}

	.invite {
		.invite_logo {
			.logo {
				margin-top: 10%;
				font-size: 22px;
				p {
					position: relative;
					top: -10px;
				}
			}
		}
		.invite_font {
			position: fixed;
			font-size: 1.3rem;
			top: 55%;
			left: 50%;
			width: 50%;
			height: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
		}
		.invite_code {
			width: 55%;
			position: absolute;
			top: 60%;
			left: 51%;
			transform: translate(-50%, -50%);
			.code_code {
				width: 90%;
				padding: 5px 0px;
				background: #ae7b21;
				border-radius: 5px;
				margin-bottom: 10px;
				/*background: linear-gradient(#79530f, #ae7b21,#79530f);*/
			}
		}
	}

	.btn {
		margin: 10px;
	}
</style>
